<%@ page pageEncoding="UTF-8"%>
<%@ include file="../common/head.jsp"%>
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>${item.courseName }</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" max-age="0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Expires" content="0" />
<meta name="version" content="1.0" />
<script src="${ctx}/qiantai/static/js/jquery.2.1.4.min.js"></script>
<link rel="stylesheet" href="${ctx }/qiantai/static/css/courseopen.css">
<link rel="stylesheet" href="${ctx }/qiantai/static/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx }/qiantai/static/css/font-awesome.min.css" />
<link rel="stylesheet" href="${ctx }/qiantai/static/css/home.css">
<link rel="stylesheet" href="${ctx}/qiantai/static/css/course_intro.css" />
<link rel="stylesheet" href="${ctx}/qiantai/static/css/course.css" />

<script type="text/javascript">
	 
	function shwoinfotab(type) {
		if (type == "content") {
			$("#detail-tag-button").addClass("selected");
			$("#review-tag-button").removeClass("selected");
			$("#content-section").show();
			$("#comment-section").hide();
		} else {
			$("#review-tag-button").addClass("selected");
			$("#detail-tag-button").removeClass("selected");
			$("#content-section").hide();
			$("#comment-section").show();
		}
	}
	 
</script>
</head>
<body class="">
	<div id="j-activityBanner" class="f-dn ga-click" data-cate="小黄条" data-action="点击"
		style="position: relative; z-index: 300;"></div>
	<div id="j-activityRightBanner" class="ga-click"
		style="position: fixed; z-index: 300; text-align: right; right: 16px; bottom: 143px;"></div>
	<div id="j-appbanner" style="position: relative; z-index: 300;"></div>
	<div id="g-container">
		<%@ include file="./menu.jsp"%>
		<div id="g-body">
			<div class="m-top f-cb f-pr f-f0">
				<div class="g-flow">
					<div id="j-breadcrumb"></div>
					<div class="g-sd1 video-intro">
						<div id="j-courseImg" class="m-recimg">
							<img class="img" id="" src="${ctx}/resource/${item.imgFile}" width="510" height="288" alt="图片">
						</div>
					</div>
					<div class="g-mn1 course-enroll-info-wrapper" style="height: 300px">
						<div class="title-wrapper">
							<div class="f-cb f-pr">
								<div class="f-fl course-title-wrapper">
									<span class="course-title f-ib f-vam">${item.courseName }</span>
									<span id="j-teacherAssistMark" class="f-fcf f-f0 taMark" style="display: block"> ${item.absContent } </span>
								</div>
							</div>
							<div id="course-enroll-info">
								<div class="course-enroll-info" style="font-size: 15px">${item.absContent }</div>

								<div class="course-enroll-info_course-enroll_price-enroll" style="font-size: 14px">
									<!--Regular if11-->
									<span class="course-enroll-info_course-enroll_price-enroll_enroll-count">更新日期: ${item.addDate}</span>
									<span class="course-enroll-info_course-enroll_price-enroll_enroll-count" style="margin-left: 20px">
										已有${item.viewCount}人观看</span>
								</div>
								<c:if test="${SESSION_BEAN.role=='SimpleUser'}">
								 
								</c:if>
							</div>
						</div>
					</div>
				</div>
			</div>
			 
			<div class="g-flow">
				<div class="b-40"></div>
				<div class="g-wrap f-cb">
					<div class="g-mn2">
						<div class="g-mn2c f-bgw m-infomation f-f0">
							<div class="m-infomation_tabs">
								<div data-action="点击详情tab" data-label="1207235207" class="ga-click m-infomation_tabs_tab selected f-ib f-vam"
									id="detail-tag-button" onclick="shwoinfotab('content')">课程详情</div>
								<div data-action="点击评价tab" data-label="1207459220" class="ga-click m-infomation_tabs_tab f-ib f-vam"
									id="review-tag-button" onclick="shwoinfotab('comment')">
									课程评价
									<span id="review-tag-num"></span>
								</div>
							</div>
							<div id="content-section" class="m-infomation_content-section">
								<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player"
									style="width: 740px">
									<div class="jp-type-single">
										<div id="jquery_jplayer_1" class="jp-jplayer"></div>
										<div class="jp-gui">
											<div class="jp-video-play">
												<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
											</div>
											<div class="jp-interface" style="width: 740px">
												<div class="jp-progress">
													<div class="jp-seek-bar">
														<div class="jp-play-bar"></div>
													</div>
												</div>
												<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
												<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
												<div class="jp-controls-holder">
													<div class="jp-controls">
														<button class="jp-play" role="button" tabindex="0">play</button>
														<button class="jp-stop" role="button" tabindex="0">stop</button>
													</div>
													<div class="jp-volume-controls">
														<button class="jp-mute" role="button" tabindex="0">mute</button>
														<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
														<div class="jp-volume-bar">
															<div class="jp-volume-bar-value"></div>
														</div>
													</div>
													<div class="jp-toggles">
														<button class="jp-repeat" role="button" tabindex="0">repeat</button>
														<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
													</div>
												</div>
												<div class="jp-details">
													<div class="jp-title" aria-label="title">&nbsp;</div>
												</div>
											</div>
										</div>
										<div class="jp-no-solution">
											<span>Update Required</span>
											To play the media you will need to either update your browser to a recent version or update your
											<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
											.
										</div>
									</div>
								</div>
								<div class="category-title f-f0" style="margin-top: 20px">
									<span class="category-title_icon f-ib f-vam u-icon-categories"></span>
									<span class="f-ib f-vam">课程概述</span>
								</div>
								<div class="category-content j-cover-overflow">
									<div class="f-richEditorText">${item.courseContent }</div>
								</div>
								<div class="category-title f-f0">
									<span class="category-title_icon f-ib f-vam f-18 u-icon-stacks"></span>
									<span class="f-ib f-vam">参考资料</span>
								</div>
								<div class="category-content j-cover-overflow">
									<div class="f-richEditorText">${item.cankaoContent }</div>
								</div>
								<div class="category-title f-f0">
									<span class="category-title_icon f-ib f-vam f-18 u-icon-stacks"></span>
									<span class="f-ib f-vam">视频下载</span>
								</div>
								<div class="category-content j-cover-overflow">
									<div class="f-richEditorText"><a href="${ctx}/com/downloadVideo.do?uid=${item.id}">点击下载</a>
									</div>
								</div>
							</div>
							<div id="comment-section" style="display: none">
								<div class="ux-mooc-comment-course-comment">

									<div class="ux-mooc-comment-course-comment_head">
										<!--Regular if50-->
										<div class="ux-mooc-comment-course-comment_head_rating-scores">
											<span>${itemScore }</span>
										</div>
										<div class="ux-mooc-comment-course-comment_head_rating-action">

											<div class="ux-mooc-comment-course-comment_head_rating-action_tips">
												<span>共${commentSize }条评价</span>
											</div>
										</div>

										<div class="j-tabcon" style="margin-top: 20px; width: 100%; clear: both">
											<form action="${ctx}/com/addCourseComment.do" method="post" id="commentform">
												<input type="hidden" value="${item.id}" name="courseId" />
												<div class="content f-bg j-fkContent">
													<div class="m-feedbackSys">

														<div class="classify f-cb">
															<div class="j-type type f-fl">
																<input type="radio" class="j-typeradio typeradio" checked="checked" id="auto-id-1573530661711"
																	name="score" value="5">
																<label class="typelabel j-typelabel">5分</label>
																<input type="radio" class="j-typeradio typeradio" id="auto-id-1573530661712" name="score" value="4">
																<label class="typelabel j-typelabel">4分</label>
																<input type="radio" class="j-typeradio typeradio" id="auto-id-1573530661713" name="score" value="3">
																<label class="typelabel j-typelabel">3分</label>
																<input type="radio" class="j-typeradio typeradio" id="auto-id-1573530661714" name="score" value="2">
																<label class="typelabel j-typelabel">2分</label>
																<input type="radio" class="j-typeradio typeradio" id="auto-id-1573530661715" name="score" value="1">
																<label class="typelabel j-typelabel">1分</label>
															</div>
														</div>
														<div class="cnt">
															<div class="f-cb">
																<div class="j-feed-content auto-1573530661699-parent">
																	<div class="m-nesIpt f-cb auto-1573530661699">
																		<div class="area j-inputArea f-fl">
																			<div>
																				<textarea name="content" rows="6" id="jklj32kl4j32lk" cols="130" placeholder="请填写课程评论" required="required"></textarea>
																			</div>
																		</div>

																	</div>
																</div>
															</div>
														</div>
														<div>
														<c:if test="${SESSION_BEAN.role=='SimpleUser'}">
															<a class="j-saveBtn u-btn u-btn-default" id="auto-id-1573530661710" onclick="addcomment()">提交</a>
														</c:if>
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>
									<script type="text/javascript">
										function addcomment() {
											var ddd = $("#jklj32kl4j32lk").val();
											if (ddd == "") {
												layer.open({
													title : '提示信息',
													content : "请输入评价内容"
												});
												return false ;
											}
											$("#commentform").submit();
										}
									</script>

									<div style="clear: both;"></div>
									<div class="ux-mooc-comment-course-comment_comment-list" style="margin-top: 45px">
										<c:forEach items="${commentList }" var="comment">
											<div class="ux-mooc-comment-course-comment_comment-list_item">
												<div class="ux-mooc-comment-course-comment_comment-list_item_avatar">
													<a href="//www.icourse163.org/home.htm?userId=7727401" target="_top">
														<img src="${ctx}/resource/${comment.user.photo}" width="40" height="40">
													</a>
												</div>
												<div class="ux-mooc-comment-course-comment_comment-list_item_body">
													<div class="ux-mooc-comment-course-comment_comment-list_item_body_user-info">
														<a class="primary-link ux-mooc-comment-course-comment_comment-list_item_body_user-info_name" href=""
															target="_top">${comment.user.userName }</a>

													</div>
													<div class="ux-mooc-comment-course-comment_comment-list_item_body_content">
														<span>${comment.content }</span>
														<!--Regular if306-->
													</div>
													<div class="ux-mooc-comment-course-comment_comment-list_item_body_comment-info">
														<div class="ux-mooc-comment-course-comment_comment-list_item_body_comment-info_time">发表于${comment.addDate }</div>
													</div>
													<!--Regular if309-->
												</div>
											</div>
										</c:forEach>
									</div>


									<!--Regular if59-->
									<!--Regular if34-->
								</div>
							</div>
						</div>
						 
					</div>
					<div class="g-sd2 m-sd2">

						<div class="m-sdCourse" id="j-sdCourse"></div>
						<div class="m-sdinfo" id="j-sdinfo">
							<div id="j-center" class="m-center f-dn"></div>
							<div class="f-bgw" id="j-teacher">
							</div>
							<div id="j-fix-parent">
								<div class="recommend-side" id="j-recommend-side" style="margin-top: 0px">
									<div class="um-recommend um-recommend-side" >
										<div class="um-recommend_hd f-pr">
											<!--Regular if37-->
											<h3 class="um-recommend_hd_tlt">相关课程</h3>

											<!--Regular if38-->
										</div>
										<div class="um-recommend-list f-cb">
											<!--Regular list-->
											<!--Regular if39-->
											<c:forEach items="${xglist }" var="xgitem">
												<div class="um-recommend-list_item kaoyan f-fl f-cb f-pr card-small">
													<img class="um-recommend-list_item_img f-fl" src="${ctx}/resource/${xgitem.imgFile}">
													<!--Regular if40-->

													<div class="um-recommend-list_item_wrap f-fl">
														<h4 class="um-recommend-list_item_name" title="${xgitem.courseName}">
															<a href="${ctx}/com/getCourse.do?uid=${xgitem.id}">${xgitem.courseName}</a>
														</h4>
														<div class="um-recommend-list_item_school_info">
															<!--Regular if41-->
															<h4 class="um-recommend-list_item_teacher f-ib">${xgitem.typesel}</h4>
														</div>
														<!--Regular if42-->
														<div class="um-recommend-list_item_count f-pa">
															<span class="u-icon-person f-fc9"></span>
															<span class="hot">${xgitem.viewCount}人观看</span>
														</div>

													</div>
												</div>
											</c:forEach>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<link href="${ctx }/jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${ctx }/jplayer/dist/jplayer/jquery.jplayer.min.js"></script>
		<script type="text/javascript" src="${ctx }/jplayer/dist/add-on/jplayer.playlist.min.js"></script>
		<script type="text/javascript">
			$("#jquery_jplayer_1").jPlayer({
				ready : function() {
					$(this).jPlayer("setMedia", {
						title : "${item.courseName}",
						m4v : "${ctx}/resource/${item.videoFile}",
						poster : "${ctx}/resource/${item.imgFile}"
					});
				},
				swfPath : "${ctx}/jplayer/dist/jplayer",
				supplied : "webmv, ogv, m4v",
				size : {
					width : "740px",
					height : "480px",
					cssClass : "jp-video-360p"
				},
				// 		timeupdate: function(event) {
				// 			if (event.jPlayer.status.currentTime > guankanshichang) {
				// 		        $(this).jPlayer('stop');
				// 				alert("试看已经结束,充值会员后继续观看");
				// 		    }
				// 		},
				useStateClassSkin : true,
				autoBlur : false,
				smoothPlayBar : true,
				keyEnabled : true,
				remainingDuration : true,
				toggleDuration : true
			});
		</script>
		<%@ include file="./footer.jsp"%>

	</div>

</body>
</html>